<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title></title>
	<script src="vue.js" type="text/javascript"></script>
</head>
<body>
	<div id="app">
		<ul>
			<li v-for="(it,index) in arr">{{ index+1 }}大写字母：{{ it }}</li>
		</ul>
		<input type="button" @click="addVegetables" value="增加蔬菜">
		<input type="button" @click="subVegetables" value="减少蔬菜">
		<h2 v-for="item in vegetables" :title="item.name">{{ item.name }}</h2>
	</div>
<script>
	var app=new Vue({
		el:"#app",
		data:{
			arr:["A","B","C","D"],
			vegetables:[
				{name:"黄瓜"},
				{name:"菠菜"}
			]
			
		},
		methods: {
			addVegetables:function() {
				this.vegetables.push({name:"西红柿"})
			},
			subVegetables:function() {
				this.vegetables.shift()
			}
		},
	})
</script>

</body>
</html>
